<template>
	<!-- 	<view class="content">
		<view class="collection">
			<view class="container_of_slide" v-for="(item, index) in lists" :key="index">
				<view class="slide_list">
					<view class="now-message-info" hover-class="uni-list-cell-hover">
						<view class="icon-circle">
							<image class='goods-img' :src="item.avatar" style="width: 72rpx;height: 72rpx;"></image>
						</view>
						<view class="list-right">
							<view class="list-title">{{ item.nickname }}</view>
							<view class="list-detail color-6">手机号: {{ item.mobile }}</view>
							<view class="list-detail">推荐时间: {{ item.ctime }}</view>
						</view>
					</view>
					<view style="clear:both"></view>
				</view>
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view> -->
	<view class="Main">
		<view class="Item" v-for='A,B in lists' :key="B">
			<image :src="A.avatar" class="L"></image>
			<view class="R">
				<view class="T">
					<view class="name">
						{{A.nickname}}
					</view>
					<view style="font-size: 20rpx;color: #b9b9b9;">
						联系电话：{{A.mobile}}
					</view>
				</view>
				<view class="M">
					<view class="Income">
						总下级人数：<text>{{A.sonnum||0}}</text>
					</view>
					<view class="RefeRence">
						推荐人：{{user.nickname}}
					</view>
				</view>
				<view class="B">
					<view class="Tel">
						总抢单次数：{{A.sonorder||0}}
					</view>
					<view class="Time">
						加入时间：{{Subst(A.ctime)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				lists: [],
				page: 1, //当前页
				limit: 10, //每页显示几条
				loadStatus: 'more',
				user: {}
			};
		},
		onLoad() {
			this.getDataList();
			this.getuser()
		},
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.getDataList()
			}
		},
		computed: {

		},
		methods: {
			LookDown(e) {
				uni.navigateTo({
					url: `/pages/member/invite/DownList?id=${e}`
				})
			},
			Subst(value) {
				let A = value.substring(0, 10)
				return A
			},
			getuser() {
				this.$api.userInfo({}, res => {
					this.user = res.data
				})
			},
			getDataList() {
				this.loadStatus = 'loading'
				let data = {
					page: this.page,
					limit: this.limit,
					user_id: this.user.id
				}
				this.$api.Myson(data, res => {
					if (res.data.length > 0) {
						let lists = this.lists.concat(res.data);
						this.lists = lists;
						if (res.count > this.page) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.Main {
		.Item {
			display: flex;
			padding: 30rpx 20rpx;
			margin: 10rpx 30rpx;
			background-color: #202226;
			border-radius: 20rpx;

			.L {
				width: 72rpx;
				height: 72rpx;
				border: 1px solid #E9E9EB;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.R {
				flex: 1;

				.T {
					margin-bottom: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
					}

					.LookDown {
						width: 140rpx;
						height: 40rpx;
						border: 1px solid #F2D7AAFF;
						opacity: 1;
						border-radius: 24rpx;
						color: #F2D7AAFF;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}

				.M {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #b9b9b9;

					.Income {
						text {
							color: #F2D7AAFF;
						}
					}

					.RefeRence {}
				}

				.B {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #b9b9b9;

					.Tel {}

					.Time {}
				}
			}
		}

	}
</style>